<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue计算属性和过滤器</title>
        <!---第一步导入需要的vue.js-->
        <script src="../js/vue.js"></script>
</head>
<body>

    <div id = "root">
        <div>计算属性
            <input type="text" v-model="firstNumber">
            +
            <input type="text" v-model="secendNumber">
            ={{csum}}
            


            ={{fsum()}}

            <input type="text" v-model="thirdNumber">
        </div>


        <div>
            当前时间为：{{currentDate}}<br/>
            过滤器：
            当前时间为：{{currentDate|fn('yyyy-MM-dd')}}


        </div>

        

    </div>
    
</body>

<script>

    new Vue({
        el:"#root",
        data:{
            firstNumber:"",
            secendNumber:"",
            thirdNumber:"",
            currentDate:new Date(),
        },
        computed:{
            csum(){
                console.log("调用了csum")
                return parseInt(this.firstNumber)+parseInt(this.secendNumber);
            }   
        },
        methods: {
            fsum(){
                console.log("调用了fsum")
                return parseInt(this.firstNumber)+parseInt(this.secendNumber);
            }
        },
        filters:{
            fn(source,formatStr){
                return source.toLocaleString("zh");
            }
        }
        

    })


</script>
</html>